| 領域 | 範例 | 
|---|---|
| 前端開發 | 操作 DOM、表單驗證、動畫效果 | 
| 後端開發 | 使用 Node.js 建立 API 或 Web 服務 | 
| 行動應用 | React Native、Ionic 等跨平台框架 | 
| 桌面應用 | Electron 製作跨平台桌面軟體 | 
<!DOCTYPE html>
<html>
<body>
    
<p id="demo">Hello</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>更改</button>
</body>
</html>
2.JavaScript 改變 HTML 屬性值
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">開</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">關</button>
</body>
</html>
3.JavaScript 改變 HTML 樣式(CSS)
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">變大</button>
</body>
</html> 
4.JavaScript 隱藏 HTML 元素
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">隱藏</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">顯示
</button>
</body>
</html> 
感謝 未知作者 的精彩分享!
JavaScript 生態系統真的很豐富,這樣的分享對開發者很有幫助。
實際的程式碼範例很有幫助,讓理論更容易理解。
也歡迎版主有空參考我的系列文「南桃AI重生記」:https://ithelp.ithome.com.tw/users/20046160/ironman/8311
如果覺得有幫助的話,也歡迎訂閱支持!